<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在热映 - 在线影院订票系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .navbar-brand {
            font-weight: bold;
            color: #667eea !important;
        }
        .movie-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
        }
        .movie-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        .movie-poster {
            height: 350px;
            object-fit: cover;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .movie-poster:hover {
            transform: scale(1.05);
        }
        .movie-info {
            padding: 1.5rem;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .movie-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 0.8rem;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .movie-meta {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 0.6rem;
            line-height: 1.5;
        }
        .movie-meta i {
            color: #667eea;
            width: 16px;
        }
        .movie-genre {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.85rem;
            display: inline-block;
            margin-bottom: 1rem;
            font-weight: 500;
        }
        .movie-details {
            flex-grow: 1;
        }
        .movie-actions {
            margin-top: auto;
        }
        .search-form {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .btn-search {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
        }
        .btn-book {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
            border-radius: 10px;
            color: white;
        }
        .btn-book:hover {
            color: white;
            transform: translateY(-2px);
        }
        .no-movies {
            text-align: center;
            padding: 3rem;
            color: #666;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="${pageContext.request.contextPath}/movies">
                <i class="fas fa-film me-2"></i>影院订票系统
            </a>

            <div class="navbar-nav ms-auto">
                <c:if test="${not empty sessionScope.user}">
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/orders">
                                <i class="fas fa-ticket-alt me-2"></i>我的订单
                            </a></li>
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/profile">
                                <i class="fas fa-user-edit me-2"></i>个人信息
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                                <i class="fas fa-sign-out-alt me-2"></i>退出登录
                            </a></li>
                        </ul>
                    </div>
                </c:if>
                <c:if test="${empty sessionScope.user}">
                    <a class="nav-link" href="${pageContext.request.contextPath}/login">
                        <i class="fas fa-sign-in-alt me-1"></i>登录
                    </a>
                </c:if>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 搜索表单 -->
        <div class="search-form">
            <h4 class="mb-3"><i class="fas fa-search me-2"></i>电影搜索</h4>
            <form action="${pageContext.request.contextPath}/movies" method="get">
                <input type="hidden" name="action" value="search">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">电影名称</label>
                        <input type="text" class="form-control" name="title" value="${searchTitle}"
                               placeholder="模糊搜索">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">影片类型</label>
                        <select class="form-select" name="genre">
                            <option value="">全部类型</option>
                            <option value="动作" ${searchGenre == '动作' ? 'selected' : ''}>动作</option>
                            <option value="喜剧" ${searchGenre == '喜剧' ? 'selected' : ''}>喜剧</option>
                            <option value="爱情" ${searchGenre == '爱情' ? 'selected' : ''}>爱情</option>
                            <option value="科幻" ${searchGenre == '科幻' ? 'selected' : ''}>科幻</option>
                            <option value="恐怖" ${searchGenre == '恐怖' ? 'selected' : ''}>恐怖</option>
                            <option value="剧情" ${searchGenre == '剧情' ? 'selected' : ''}>剧情</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">影城位置</label>
                        <input type="text" class="form-control" name="city" value="${searchCity}"
                               placeholder="城市名称">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">上映时间</label>
                        <input type="date" class="form-control" name="startDate" value="${searchStartDate}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">最低价格</label>
                        <input type="number" class="form-control" name="minPrice" value="${searchMinPrice}"
                               placeholder="元" min="0" step="0.01">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">最高价格</label>
                        <input type="number" class="form-control" name="maxPrice" value="${searchMaxPrice}"
                               placeholder="元" min="0" step="0.01">
                    </div>
                    <div class="col-md-6 mb-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary btn-search me-2">
                            <i class="fas fa-search me-1"></i>搜索
                        </button>
                        <a href="${pageContext.request.contextPath}/movies" class="btn btn-outline-secondary">
                            <i class="fas fa-undo me-1"></i>重置
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- 错误信息 -->
        <c:if test="${not empty error}">
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>${error}
            </div>
        </c:if>

        <!-- 电影列表 -->
        <div class="row">
            <c:if test="${empty movies}">
                <div class="col-12">
                    <div class="no-movies">
                        <i class="fas fa-film fa-3x mb-3 text-muted"></i>
                        <h4>暂无电影信息</h4>
                        <p class="text-muted">
                            <c:if test="${isSearch}">请尝试调整搜索条件</c:if>
                            <c:if test="${not isSearch}">敬请期待更多精彩电影</c:if>
                        </p>
                    </div>
                </div>
            </c:if>

            <c:forEach var="movie" items="${movies}">
                <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                    <div class="card movie-card h-100">
                        <img src="${movie.posterUrl != null ? movie.posterUrl : pageContext.request.contextPath.concat('/images/default-poster.jpg')}"
                             class="card-img-top movie-poster" alt="${movie.title}"
                             onclick="showMovieDetail(${movie.id})">
                        <div class="movie-info">
                            <div class="movie-details">
                                <h5 class="movie-title">${movie.title}</h5>
                                <div class="movie-meta">
                                    <i class="fas fa-user-tie me-1"></i>导演：${movie.director}
                                </div>
                                <div class="movie-meta">
                                    <i class="fas fa-clock me-1"></i>时长：${movie.duration}分钟
                                </div>
                                <div class="movie-meta">
                                    <i class="fas fa-star me-1"></i>评分：${movie.rating != null ? movie.rating : '暂无评分'}
                                </div>
                                <span class="movie-genre">${movie.genre}</span>
                            </div>
                            <div class="movie-actions">
                                <div class="d-grid">
                                    <button class="btn btn-book" onclick="bookMovie(${movie.id})">
                                        <i class="fas fa-ticket-alt me-1"></i>立即订票
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 页面加载时检查登录状态
        $(document).ready(function() {
            checkLoginStatus();
        });

        // 检查登录状态
        function checkLoginStatus() {
            <c:if test="${empty sessionScope.user}">
                console.log('用户未登录，重定向到登录页面');
                alert('登录已过期，请重新登录');
                window.location.href = '${pageContext.request.contextPath}/login';
                return false;
            </c:if>

            console.log('用户已登录: ${sessionScope.user.username}');
            return true;
        }

        // 定期检查登录状态（每5分钟检查一次）
        setInterval(function() {
            $.ajax({
                url: '${pageContext.request.contextPath}/api/checkLogin',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (!response.success) {
                        alert('登录已过期，请重新登录');
                        window.location.href = '${pageContext.request.contextPath}/login';
                    }
                },
                error: function() {
                    console.log('检查登录状态失败');
                }
            });
        }, 5 * 60 * 1000); // 5分钟

        function showMovieDetail(movieId) {
            if (!checkLoginStatus()) return;
            window.location.href = '${pageContext.request.contextPath}/movie/detail?id=' + movieId;
        }

        function bookMovie(movieId) {
            if (!checkLoginStatus()) return;

            <c:if test="${empty sessionScope.user}">
                alert('请先登录后再订票');
                window.location.href = '${pageContext.request.contextPath}/login';
                return;
            </c:if>

            window.location.href = '${pageContext.request.contextPath}/showtimes?movieId=' + movieId;
        }
    </script>
</body>
</html>
